<template>
  <div id="PrintData">
    <div class="Edit_Div1"></div>
    <div class="NameEditCls">
      <el-row style="padding-bottom:8px">
        <el-col :span="24">
          <div>
            <el-button style="float:left" @click="$router.go(-1)" type="info" icon="el-icon-arrow-left" size="mini">返回
            </el-button>
            <el-button v-print="'#PrintData'" type="primary" size="mini" icon="el-icon-printer">
              打印
            </el-button>
          </div>
        </el-col>
      </el-row>
      <el-row class="borderRow">
        <el-col :span="24">
          <br /><br />
          <p style="font-size:20px;line-height:50px;">{{ArticleView.Title}}</p>
          <el-col class="colSpan" :span="12">
            <el-tag effect="dark" size="small" :style="'border-color:'+ArticleView.Visual" :color="ArticleView.Visual">
              {{ArticleView.StatusName_CHS}}
            </el-tag>
            <span style="color: rgb(180, 180, 180);font-size:13px">类型：{{ArticleView.TypeName_CHS}}</span>
            <span style="color: rgb(180, 180, 180);font-size:13px">来源：{{ArticleView.Source}}</span>
            <span style="color: rgb(180, 180, 180);font-size:13px">作者：{{ArticleView.Author}}</span>
            <span style="color: rgb(180, 180, 180);font-size:13px">点击：{{ArticleView.Clicks}}</span>
          </el-col>
          <el-col :span="12">
            <div style="float:right">
              <span style="color: rgb(180, 180, 180);font-size:13px"
                v-if="Object.keys(ArticleView).length">{{ArticleView.CreateDate|TimeFilter}}</span>
            </div>

          </el-col>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div style="border-bottom: 1px solid #f7f7f7;">
            <div v-html="ArticleView.Description" style="padding-bottom:30px"></div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <br />
          <el-button @click="$router.go(-1)" type="info" icon="el-icon-arrow-left" size="mini">
            返回</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.Edit_Div1 {
  height: 2px;
  background-color: rgb(180, 180, 180);
}
.borderRow {
  border-top: 1px solid #f7f7f7;
  border-bottom: 1px solid #f7f7f7;
  padding-bottom: 10px;
}
.NameEditCls {
  padding: 10px;
}
a {
  color: white;
  text-decoration: none;
}
.colSpan {
  span {
    padding-left: 8px;
  }
}
</style>

<script>
export default {
  data () {
    return {
      ArticleView: []
    }
  },
  methods: {
    ReadArticleData () {
      this.$axios({
        url: '/HrApi/ArticleMange/ArticleDataBinding',
        method: 'GET',
        params: {
          pk_Article: this.$route.query.id
        }
      }).then(res => {
        this.ArticleView = res.data.data;
      })
    }
  },
  //过滤时间
  filters: {
    TimeFilter (t) {
      if (t === null) {
        return '无'
      }
      let dt = t.split('T').join(' ')
      if (dt.split('.').length > 1) {
        dt = dt.split('.')[0]
      }
      return dt
    }
  },
  mounted () {
    this.ReadArticleData();
  }
}
</script>